<template>
  <div>
    <div id="chart" style="width: 750px; height: 400px"></div>
  </div>
</template>
<script>
import { ChartsApi } from '../../api/reports';

export default {
  data() {
    return {};
  },
  mounted() {
    this.getChart();
  },
  methods: {
    getChartDom(
      series, legend, xAxis, yAxis,
    ) {
      const myChart = this.$echarts.init(document.getElementById('chart'));
      const option = {
        title: {
          text: '用户来源',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend,
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xAxis[0].data,
          },
        ],
        yAxis,
        series,
      };
      myChart.setOption(option);
    },
    async getChart() {
      const res = await ChartsApi();
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.$nextTick(() => {
        this.getChartDom(res.data.series, res.data.legend, res.data.xAxis, res.data.yAxis);
      });
    },
  },
};
</script>

<style>
</style>
